import React, { useState } from 'react';
import './index.less';
import { Button, Modal, Form, Input, Select, Table } from 'antd';
import _ from 'lodash';
import data1 from '../../public/data.json';

type Props = {};
let int = [
  '候宇航',
  '陈建鹏',
  '常鹏',
  '李雨恒',
  '赵家兴',
  '赵金波',
  '刘金金',
  '王怡腾',
  '周铮铮',
  '常谭飞',
  '赵晗琪',
  '李博阳',
  '陈亚东',
  '柴晓静',
  '冯晓雯',
  '王烨',
  '唐洪洋',
  '贾岳杰',
  '王天林',
  '秦亚凯',
  '刘恒谊',
  '卢阳',
  '赵苗苗',
  '田嘉玲',
  '何旭',
  '白亚楠',
  '蒋依琳',
  '刘闯',
  '范晓涵',
  '栗鹏杰',
  '尚泽',
  '韩永强',
  '黄永胜',
  '陈雪谊',
  '冯子康',
  '赵林辉',
  '刘津芳',
];
const datas = data1;

// 表结构
const columns = [
  {
    key: '1',
    title: '姓名',
    dataIndex: 'name',
  },
  {
    key: '2',
    title: '分享题目',
    dataIndex: 'titles',
  },
  {
    key: '3',
    title: '评价',
    dataIndex: 'appraise',
  },
  {
    key: '4',
    title: '分享时间',
    dataIndex: 'time',
  },
];

export default function index({}: Props) {
  const { TextArea } = Input;
  // 名单
  const [data, setData] = useState(int);
  // 姓名
  const [name, setName] = useState('');
  // 已分享名单
  const [already, setAlready] = useState([]);
  // 分享情况
  const [list, setList] = useState([]);
  // 点击按钮状态
  const [status, setStatus] = useState(false);
  // 对话框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 分页
  const [pageSize, changepage] = useState(5);
  const TabelSizeChange = (currentpage, pageSize) => {
    changepage(pageSize);
    // chaneg
  };
  const [bottom, setBottom] = useState('bottomRight');
  // 表单
  const [form] = Form.useForm();
  const onFinish = (values) => {
    form.resetFields();
    setIsModalOpen(false);
    let date = new Date().toLocaleDateString();
    let time = new Date().toLocaleTimeString();
    values = { key: name, name: name, time: `${date}  ${time}`, ...values };
    setList([...list, values]);
    // let dd = JSON.parse(localStorage.getItem("点名"))
    // console.log(dd);
  };

  let onRandom = () => {
    setStatus(true);
    let P = 13;
    let time = setInterval(() => {
      let i = Math.floor(Math.random() * datas.length);
      setName(data[i]);

      P -= 1;
      if (P <= 0) {
        clearInterval(time);
        setStatus(false);
        let index = Math.floor(Math.random() * datas.length);

        if (datas.length == 0) {
          alert('已点完 ');
          setAlready([]);
          setName('');
        } else if (!already.includes(datas[index])) {
          setName(datas[index]);

          var adds = JSON.parse(localStorage.getItem('点名')) || [];
          adds.push(datas[index]);
          localStorage.setItem('点名', JSON.stringify(adds));

          setIsModalOpen(true);
          setAlready([...already, datas[index]]);
          datas.splice(index, 1);
        }
      }
    }, 150);
  };

  return (
    <div className="home">
      <div className="random">
        {data.map((item, index) => {
          return (
            <button
              className="but"
              style={{
                backgroundColor:
                  item === name ? 'red' : already.includes(item) ? 'gray' : '',
                color:
                  item === name ? '#fff' : already.includes(item) ? '#fff' : '',
                margin: '8px',
              }}
              key={index}
            >
              {item}
            </button>
          );
        })}
        <Modal
          title={name + '分享情况'}
          onCancel={handleCancel}
          open={isModalOpen}
          footer={null}
        >
          <Form
            name="basic"
            form={form}
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              maxWidth: 600,
              marginRight: '60px',
            }}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="分享题目"
              name="titles"
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="评价"
              name="appraise"
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <TextArea rows={4} />
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                确定
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </div>
      <Button
        type="primary"
        disabled={status}
        style={{
          width: '200px',
          height: '50px',
          marginTop: '50px',
          borderRadius: '10px',
          color: 'black',
          margin: '-20px',
        }}
        onClick={_.debounce(() => onRandom(), 300)}
      >
        随机点名
      </Button>
      <Button
        type="primary"
        disabled={status}
        style={{
          width: '200px',
          height: '50px',
          marginTop: '50px',
          marginLeft: '30px',
          borderRadius: '10px',
          color: 'black',
        }}
        onClick={() => {
          localStorage.removeItem('点名');
        }}
      >
        清除缓存
      </Button>
      <Table
        style={{
          width: '90%',
          margin: '50px auto',
        }}
        columns={columns}
        dataSource={list}
        scroll={{
          y: 210,
        }}
        pagination={{
          position: [bottom],
          pageSize: pageSize,
          showSizeChanger: true,
          pageSizeOptions: [1, 5, 10, 15, 20],
          onChange: TabelSizeChange,
        }}
      />
    </div>
  );
}
